<template>
  <div class="answer-sheet">
    <white-header
      :isShowTopNav="true"
      :isShowBack="true"
      :isShowRight="true"
      :title="title"
      :handleClickLeft="
        ['2', '3'].includes(type) && questionList.length > 0 && !review
          ? handleClickLeft
          : null
      "
    ></white-header>
    <!-- 倒计时 -->
    <div
      class="count-down"
      v-if="
        ['2', '3'].includes(type) &&
          questionList &&
          questionList.length > 0 &&
          !review &&
          paperDetail.span > 0
      "
    >
      <img src="/img/mobile/answer_count_down.png" />
      <span class="time-label">倒计时：</span>
      <!-- <van-count-down :time="time" format="HH:mm:ss">
                <template #default="timeData">
                    <span class="block">{{ timeData.hours }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.minutes }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.seconds }}</span>
                </template>
            </van-count-down> -->
      <van-count-down :time="paperDetail.span" @finish="finish" />
    </div>
    <div class="rotate-box" id="rotate-box">
      <!-- 单选题 -->
      <single-choice
        v-if="
          current_item && current_item.type == 1 && questionList[num_active]
        "
        v-model="questionList[num_active].user_answer"
        :detail="current_item"
        @handleExplain="handleExplain"
        @change="handleQuestionChange"
      ></single-choice>
      <!-- 多选题 -->
      <multiple-choice
        v-if="
          current_item && current_item.type == 2 && questionList[num_active]
        "
        v-model="questionList[num_active].user_answer"
        :detail="current_item"
        @handleExplain="handleExplain"
        @change="handleQuestionChange"
      ></multiple-choice>
      <!-- 简答题 -->
      <short-answer
        v-if="
          current_item && current_item.type == 3 && questionList[num_active]
        "
        v-model="questionList[num_active].user_answer"
        :detail="current_item"
        @handleExplain="handleExplain"
        @change="handleQuestionChange"
      ></short-answer>
      <!-- 填空题 -->
      <Cloze
        v-if="
          current_item && current_item.type == 4 && questionList[num_active]
        "
        v-model="questionList[num_active].user_answer"
        :detail="current_item"
        @handleExplain="handleExplain"
        @change="handleQuestionChange"
      ></Cloze>
      <!-- 判断题 -->
      <Judgment
        v-if="
          current_item && current_item.type == 5 && questionList[num_active]
        "
        v-model="questionList[num_active].user_answer"
        :detail="current_item"
        @handleExplain="handleExplain"
        @change="handleQuestionChange"
      ></Judgment>
      <van-empty
        v-if="questionList && questionList.length == 0"
        :description="null_title"
      />
      <!-- 题目解析 -->
      <div class="analysis-container" v-if="current_item.is_show_explain">
        <div class="analysis-head-info">
          <div class="head-left" v-if="!['1', '2', '3'].includes(type)">
            <div class="error-number">{{ current_item.wrongCount || 0 }}</div>
            <div class="error-text">错误次数</div>
          </div>
          <div class="head-right">
            <div class="difficulty-number">
              <van-rate
                v-model="current_item.difficulty"
                color="var(--theme-color)"
                readonly
              />
            </div>
            <div class="difficulty-text">难度</div>
          </div>
        </div>
        <div class="analysis-content-info">
          <div class="analysis-video" v-if="current_item.videoUrl">
            <div class="video-name">解析视频</div>
            <video
              width="100%"
              style="padding:0 .288rem;"
              :src="current_item.videoUrl"
              controls="controls"
            >
              您的浏览器不支持 video 标签。
            </video>
          </div>
          <div class="analysis-question">
            <div class="analysis-text">
              <span style="color: var(--theme-color);">题目解析：</span>
              <span v-if="current_item.parsing" v-html="current_item.parsing"></span>
              <span v-else>该试题暂无解析！</span>
            </div>
          </div>
          <!-- <div class="content-name" style="color: #4a4b4d;">解析视频</div> -->
          <!-- <div class="content-name" style="color: var(--theme-color);">题目解析</div> -->
        </div>
      </div>
    </div>
    <!-- 正常考试按钮 -->
    <div class="btn-list">
      <!-- <div
        class="btn"
        v-if="['0', '4'].includes(type) && !review"
        @click="handleCheck"
        style="margin-top:0.4rem"
      >
        确定
      </div> -->
      <div class="btn-row">
        <button
          class="btn"
          @click="nextQuestionBtn('pre')"
          v-if="questionList.length > 0"
        >
          上一题
        </button>
        <button
          class="btn"
          @click="nextQuestionBtn('next')"
          v-if="questionList.length > 0"
        >
          下一题
        </button>
      </div>
      <div
        class="btn"
        @click="submitQuestionTest"
        v-if="
          ['1', '2', '3'].includes(type) &&
            questionList.length > 0 &&
            !review &&
            num_active == questionList.length - 1
        "
      >
        提交答卷
      </div>
      <div class="btn" v-if="review" @click="$router.back()">
        退出
      </div>
    </div>
    <!-- 底部导航 -->
    <div class="question-footer" v-if="questionList && questionList.length > 0">
      <div
        class="collection"
        @click="collectionHandle"
        v-if="['0'].includes(type)"
      >
        <img
          src="/img/mobile/answer_collection.png"
          alt=""
          :style="{
            backgroundColor:
              current_item.isCollect === 1 ? 'var(--theme-color)' : '#c8c9cc'
          }"
        />
      </div>
      <span
        ><span style="font-weight:bold;">{{ num_active + 1 }}</span
        >/{{ questionList.length }}</span
      >
      <span @click="showAnswerSheet = true">答题卡</span>
    </div>
    <!-- 答题卡弹窗 -->
    <van-action-sheet
      v-model="showAnswerSheet"
      title="答题卡"
      class="answer-card"
    >
      <div class="answer-sheet-box">
        <template v-if="['0', '4'].includes(type) || review">
          <!-- <div class="box-title">单选题（12）</div> -->
          <div class="question-number">
            <div
              :class="[item.is_answer ? 'done':null,
                'number-box',
                num_active == index ? 'active' : null,
                item &&
                item.doneQuestionType &&
                ['w', 'u', 'hc'].includes(item.doneQuestionType)
                  ? 'wrong'
                  : null
              ]"
              v-for="(item, index) in questionList"
              :key="'number-box' + index"
              @click="nextQuestionBtn('manual', index)"
            >
              {{ index + 1 }}
            </div>
          </div>
        </template>
        <template
          v-if="['1', '2', '3'].includes(type)"
          v-for="(item2, index2) in paperDetail.questions"
        >
          <div class="box-title" :key="'box-title' + index2">
            {{
              (item2 && item2.name) || "第" + (index2 + 1) + "部分"
            }}
          </div>
          <div class="question-number" :key="'question-number' + index2">
            <div
              v-for="(item, index) in item2.questionGroupTestQuestionList"
              :class="[
                item && item.is_answer ? 'done':null,
                'number-box',
                num_active == item._index_ - 1 ? 'active' : null,
                review &&
                item &&
                item.doneQuestionType &&
                ['w', 'u', 'hc'].includes(item.doneQuestionType)
                  ? 'wrong'
                  : null
              ]"
              :key="'number-box' + index"
              @click="nextQuestionBtn('manual', item._index_ - 1)"
            >
              {{ index + 1 }}
            </div>
          </div>
        </template>
      </div>
    </van-action-sheet>
    <!-- 考试时间到 -->
    <div class="test-time-end" v-show="is_time_out">
      <div class="test-close-box">
        <div class="clock-icon">
          <img src="/img/mobile/test_time_end.png" alt="" />
        </div>
        <p class="t-c-b-t">考试时间到</p>
        <p class="t-c-b-l">分数正在统计中，请稍等片刻...</p>
      </div>
    </div>
    <!-- 中途退出 -->
    <div class="drop-out" v-show="is_half_out">
      <div class="drop-out-box">
        <div class="out-icon">
          <img src="/img/mobile/drop_out.png" alt="" />
        </div>
        <div class="drop-out-tips">
          <p>好不容易坚持到这里～</p>
          <p>中途退出会影响评分哦，确定退出吗？</p>
        </div>
        <div class="drop-out-list">
          <div class="list-item btn-left" @click="savePaper">确定</div>
          <div class="list-item btn-right" @click="is_half_out = false">
            取消
          </div>
        </div>
      </div>
    </div>
    <!-- 提前交卷 -->
    <van-action-sheet v-model="showAdvanceSubmit" title="提示">
      <div class="advance-submit">
        <div class="head-tips">
          <p>
            亲，您还有<span class="not-question-count">{{
              unAnswerNum || 0
            }}</span
            >道题没作答哦～
          </p>
          <p>确定要提交答卷吗？</p>
        </div>
        <div class="question-container">
          <div
            class="answer-sheet-box"
            v-for="(item2, index2) in paperDetail.questions"
            :key="index2"
          >
            <div class="box-title" :key="'box-title' + index2">
              {{
                (item2 && item2.name) || "第" + (index2 && index2 + 1) + "部分"
              }}
            </div>
            <div class="question-number" :key="'question-number' + index2">
              <div
                v-for="(item, index) in item2.questionGroupTestQuestionList"
                :class="[
                  'number-box',
                  item && item.is_answer ? 'active' : null
                ]"
                :key="'number-box' + index"
                @click="nextQuestionBtn('manual', item._index_ - 1)"
              >
                {{ index + 1 }}
              </div>
            </div>
          </div>
        </div>
        <div class="advance-footer">
          <div class="advance-submit-btn" @click="savePaper">提交答卷</div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
import SingleChoice from "~/components/question/SingleChoice.vue";
import MultipleChoice from "~/components/question/MultipleChoice.vue";
import Judgment from "~/components/question/Judgment.vue";
import ShortAnswer from "~/components/question/ShortAnswer.vue";
import Cloze from "~/components/question/Cloze.vue";
import {
  getQuestionBankPaperDetail,
  saveCollection,
  deleteCollection,
  saveLastDone,
  updateLastDone,
  getLastDone,
  saveQuestionBankWrong,
  getQuestionBankChapterQuestions,
  saveChapterPractice,
  getRandomWrongQuestion,
  getQuestionBankOne,
  getQuestionBankPaperOne,
  savePaper,
  getTestReview,
  chapterContinueTest,
  getLastDoneList,
  getQuestionBankWrong,
  saveWrongPractice
} from "~/api/v2-question-bank/question-bank.js";

const originState = {
  num_active: 0, //当前数组下标
  showAnswerSheet: false, //是否打开答题卡
  showAdvanceSubmit: false, //是否提前交卷
  /* 试卷内容 */
  paperDetail: {
    span: -1,
    questions: [],
    name: ""
  },
  /* 试题 */
  questionList: [],
  /* 章节详情 */
  chapterDetail: {},
  /* 上次做到哪里 */
  lastDone: {
    chapterId: 0,
    id: 0,
    lastIndex: 0,
    userId: 0
  },
  /* 考试时间结束弹窗 */
  is_time_out: false,
  /* 中途退出弹窗 */
  is_half_out: false,
  /* 题库信息 */
  questionBank: {
    questionGroupName: ""
  },
  /* 考试回顾 */
  testRecord: {},
  /* 考试计时 */
  useTime: 0,
  /* 考试计时器 */
  count_timer: null
};

export default {
  components: {
    WhiteHeader,
    SingleChoice,
    MultipleChoice,
    Judgment,
    ShortAnswer,
    Cloze
  },
  scrollToTop: true,
  data() {
    return {
      ...originState
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      is_loading(state) {
        return state.is_loading;
      },
      kl_md(state) {
        return state.kl_md;
      },
      web_info(state) {
        return state.web_info;
      }
    }),
    /* 页面头部标题 */
    title() {
      console.log("this.type:", this.type);
      switch (this.type) {
        case "0":
          return this.chapterDetail.chapterName;
        case "1":
          return "专项训练 - " + this.paperDetail.name;
        case "2":
          if (this.review) {
            return "考试回顾 - " + this.paperDetail.name;
          } else {
            return "模拟考试 - " + this.paperDetail.name;
          }
          // return "模拟考试 - " + this.paperDetail.name;
        case "3":
          return "真题训练 - " + this.paperDetail.name;
        case "4":
          if (this.review) {
            return "错题回顾 - " + this.questionBank.questionGroupName;
          } else {
            return "错题随练 - " + this.questionBank.questionGroupName;
          }
        default:
          return "未知";
      }
    },
    /* 空试题文本提示 */
    null_title() {
      switch (this.type) {
        case "0":
          return "当前章节暂无试题哦~";
        case "1":
          return "当前专项训练暂无试题哦~";
        case "2":
          return "当前模拟考试暂无试题哦~";
        case "3":
          return "当前真题训练暂无试题哦~";
        case "4":
          return "当前错题随练暂无试题哦~";
        default:
          return "暂无试题哦~";
      }
    },
    /* 目标试题 */
    targetId(){
      return this.$route.query.targetId;
    },
    /* 题套Id */
    questionId() {
      return this.$route.query.id;
    },
    /* 试卷Id */
    testId() {
      return this.$route.query.testId;
    },
    /* 类型（0章节练习 试卷类型 1专项训练 2模拟考试 3真题训练） 4错题随练*/
    type() {
      return String(this.$route.query.type);
    },
    /* 是否是题目回顾 */
    review() {
      const { review } = this.$route.query;
      return review ? Number(review) : 0;
    },
    /* 章节Id */
    chapterId() {
      return this.$route.query.chapterId;
    },
    /* 当前正在做的题 */
    current_item() {
      if (
        this.questionList.length == 0 ||
        this.num_active > this.questionList.length - 1
      ) {
        return {
          answer: "0",
          chapter: 0,
          difficulty: 1,
          fatherChapterId: "",
          id: 0,
          parsing: "",
          question: "",
          type: 1,
          videoUrl: "",
          user_answer: "",
          /* 是否显示试题解析 */
          is_show_explain: false,
          /* 是否显示正确答案 */
          is_show_answer: false
        };
      } else {
        return this.questionList[this.num_active];
      }
    },
    /* 未完成的题目的数量 */
    unAnswerNum() {
      return this.questionList.filter(item => item && !item.is_answer).length;
    },
    /* 考试记录Id */
    testRecordId() {
      return this.$route.query.testRecord;
    },
    /* 是否是手动改卷 */
    is_manual_correct() {
      if(this.paperDetail && this.paperDetail.scoreShow == 1){
        return true;
      }else{
        return false;
      }
      // if (this.kl_md.KLSTFWB == 1 && this.web_info.RICHTEXT_SWITCH == 1) {
      //   if (
      //     this.questionList.filter(
      //       item =>
      //         [3, 4].includes(Number(item.type)) && item.richTextSwitch == 1
      //     ).length > 0
      //   ) {
      //     return true;
      //   } else {
      //     return false;
      //   }
      // } else {
      //   return false;
      // }
    }
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    formatDate(timestamp) {
      let date = new Date(timestamp);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      let add0 = m => {
        return m < 10 ? "0" + m : m;
      };
      let showTime = null;
      if (new Date(timestamp).toDateString() === new Date().toDateString()) {
        if (hour < 10) {
          showTime = "上午";
        } else if (hour < 12) {
          showTime = "中午";
        } else if (hour < 18) {
          showTime = "下午";
        } else {
          showTime = "晚上";
        }
        // console.log("今天", showTime + " " + add0(hour) + ":" + add0(minute));
        return showTime + " " + add0(hour) + ":" + add0(minute);
      } else {
        // console.log("以前", add0(year) + "/" + add0(month) + "/" + add0(day));
        return add0(year) + "/" + add0(month) + "/" + add0(day);
      }
    },
    /* 倒计时结束 */
    finish() {
      this.is_time_out = true;
      this.savePaper();
    },
    /* 提交答卷弹窗 */
    submitQuestionTest() {
      /* 未做完全部的题目 */
      if (this.unAnswerNum > 0) {
        this.showAdvanceSubmit = true;
      } else {
        this.$dialog
          .confirm({
            title: "提示",
            message: "您确定要提交试卷吗？",
            confirmButtonText: "确定",
            cancelButtonText: "取消"
          })
          .then(() => {
            // on close
            this.savePaper();
          });
      }
    },
    /* 交卷 */
    async savePaper() {
      if (!this.is_time_out) {
        this.SET_IS_LOADING(true);
      }
      if (this.count_timer) {
        clearInterval(this.count_timer);
      }
      let questionListTrim = this.questionList.map((item, index) => {
        return {
          nodeId: item.nodeId,
          questionType: item.type,
          testQuestionId: item.id,
          chosenAnswer: item.user_answer,
          score: item.score
        };
      });
      console.log("questionListTrim:", questionListTrim);
      let params = {
        paperId: this.testId,
        userId: this.user_info.id,
        questionGroupId: this.questionId,
        useTime: Math.ceil(this.useTime / 60),
        items: JSON.stringify(questionListTrim)
      };
      let result = await savePaper(params);
      console.log("提交考试：", result);
      if (result && result.data && result.data.code == 200) {
        this.destroyRemotion();
        const { data } = result.data;
        if (this.is_half_out) {
          console.log("router:", window.history);
          this.$router.back();
          this.$router.back();
          this.$router.back();
        } else {
          this.$router.replace({
            path: "/m/v2-fraction-count",
            query: {
              id: this.questionId,
              type: "fraction",
              testRecordId: JSON.stringify(data.id),
              testType: this.type,
              testId: this.testId,
              is_manual_correct: this.is_manual_correct ? 1 : 0,
              is_just_test: 1
            }
          });
          // this.$router.go(-1);
        }
      }
      this.is_half_out = false;
      this.is_time_out = false;
      this.SET_IS_LOADING(false);
    },
    async saveWrong(){
      let params = {
        json:JSON.stringify(
          {
            userId: this.user_info.id,
            questionGroupId: this.questionId,
            questionId: this.current_item.questionId,
            userAnswer: this.current_item.user_answer,
            questionType: this.current_item.type
          }
        )
        
      };
      let result = await saveWrongPractice(params);
      console.log("错题随练保存:", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        if (data) {
          console.log(data);
          this.questionList = this.questionList.map((item, index) => {
            if (item.id == this.current_item.id) {
              let new_item = {
                ...item,
                ...data,
                type: item.type,
                is_show_answer: true,
                is_show_explain: data.doneQuestionType != 'c' ? true : false,
                is_answer: true,
                is_ban_input: true
              };
              console.log("new_item:", new_item);
              return new_item;
            } else {
              return item;
            }
          });
        }
      }
    },
    /* 切换题目 */
    async nextQuestionBtn(type, index) {
      /* 保存章节 */
      if (
        ["pre", "next"].includes(type) &&
        ["0"].includes(this.type) &&
        !this.current_item.is_ban_input
      ) {
        await this.saveChapterPractice();
        // if (this.current_item.doneQuestionType == "w") {
        //   return false;
        // }
        if(['w', 'u', 'hc'].includes(this.current_item.doneQuestionType)){
          return false;
        }
      }
      //错题随练
      if (
        ["pre", "next"].includes(type) &&
        ["4"].includes(this.type) &&
        !this.current_item.is_ban_input
      ) {
        await this.saveWrong();
        if(['w', 'u', 'hc'].includes(this.current_item.doneQuestionType)){
          return false;
        }
      }
      /* 跳转到指定页 */
      if (type == "manual") {
        if (this.num_active > index) {
          document.getElementById("rotate-box").classList.add("fadeInLeft");
          setTimeout(() => {
            document
              .getElementById("rotate-box")
              .classList.remove("fadeInLeft");
          }, 500);
        } else {
          document.getElementById("rotate-box").classList.add("fadeInRight");
          setTimeout(() => {
            document
              .getElementById("rotate-box")
              .classList.remove("fadeInRight");
          }, 500);
        }
        this.num_active = index;
        this.showAnswerSheet = false;
        /* 上一页 */
      } else if (type == "pre") {
        if (this.num_active == 0) {
          return;
        }
        this.num_active--;
        // if (this.num_active == 0) {
        //   this.$toast("没有上一条了哦~");
        // }
        if (this.num_active < 0) {
          this.num_active = this.questionList.length - 1;
        }
        document.getElementById("rotate-box").classList.add("fadeInLeft");
        setTimeout(() => {
          document.getElementById("rotate-box").classList.remove("fadeInLeft");
        }, 500);
        /* 下一页 */
      } else if (type == "next") {
        if (this.num_active == this.questionList.length - 1) {
          if(["0"].includes(this.type)){
            this.$dialog.confirm({
            title: '提示',
            message: '当前练习已经全部完成，是否重新练习？',
          })
            .then(async () => {
              await this.getQuestionsByChapter();
              this.num_active = 0;
              this.questionList = this.chapterDetail.children.map(item => {
                let trim_item = this.initAnswer(item);
                let new_item = {
                  ...item,
                  ...trim_item,
                  /* 是否显示试题解析 */
                  is_show_explain: false,
                  /* 是否显示正确答案 */
                  is_show_answer: false,
                  /* 是否允许输入 */
                  is_ban_input: false,
                  /* 是否已经答题 */
                  is_answer: false
                };
                return new_item;
              });
            })
            .catch(() => {
            });
          }
          if(["4"].includes(this.type) && !this.review){
            this.$dialog.confirm({
              title: '提示',
              message: '当前练习已经全部完成，是否重新练习？',
            })
              .then(async () => {
                await this.getRandomWrongQuestion();
                this.num_active = 0;
                
              })
              .catch(() => {
              });
          }else if(["4"].includes(this.type) && this.review == 1){
            this.$dialog.confirm({
              title: '提示',
              message: '当前回顾已经是最后一题，是否重新回顾？',
            })
              .then(async () => {
                this.num_active = 0;
                
              })
              .catch(() => {
              });
          }
          return;
        }
        this.num_active++;
        // if (this.num_active == this.questionList.length - 1) {
        //   this.$toast("没有下一条了哦~");
        // }
        if (this.num_active > this.questionList.length - 1) {
          this.num_active = 0;
        }
        document.getElementById("rotate-box").classList.add("fadeInRight");
        setTimeout(() => {
          document.getElementById("rotate-box").classList.remove("fadeInRight");
        }, 500);
      }
    },
    /* 试题解析事件 */
    handleExplain(id) {
      this.questionList = this.questionList.map((item, index) => {
        if (item.id == id) {
          return {
            ...item,
            is_show_explain: true
          };
        } else {
          return item;
        }
      });
      if (["0"].includes(this.type) && !this.current_item.is_ban_input) {
        this.saveChapterPractice();
      }
      if (["4"].includes(this.type) && !this.current_item.is_ban_input) {
        this.saveWrong();
      }
    },
    /* 试题收藏事件 */
    async collectionHandle() {
      /*收藏 */
      if (this.current_item.isCollect == 0) {
        let params = {
          type: 3,
          userId: this.user_info.id,
          targetId: this.current_item.id
        };
        let result = await saveCollection(params);
        if (result && result.data && result.data.code == 200) {
          this.questionList = this.questionList.map((i, x) => {
            if (i.id == this.current_item.id) {
              return {
                ...i,
                isCollect: 1
              };
            } else {
              return i;
            }
          });
          this.$toast("收藏成功");
        }
        /* 取消收藏 */
      } else if (this.current_item.isCollect == 1) {
        let result = await deleteCollection(
          this.current_item.id + "/" + this.user_info.id
        );
        if (result && result.data && result.data.code == 200) {
          this.questionList = this.questionList.map((i, x) => {
            if (i.id == this.current_item.id) {
              return {
                ...i,
                isCollect: 0
              };
            } else {
              return i;
            }
          });
          this.$toast("取消收藏");
        }
      }
    },
    /* 获取试卷试题 */
    async getTestPaperDetail() {
      let params = {
        questionGroupPaperId: this.testId,
        questionGroupId: this.questionId,
        questionType: this.type
      };
      let result = await getQuestionBankPaperDetail(params);
      console.log("获取试卷试题：", result);
      if (result && result.data && result.data.code == 200) {
        let originData = result.data.data;
        if (originData) {
          let data_trim = [];
          let arr_index = 0;
          originData = originData.map((item, index) => {
            if (item.questionGroupTestQuestionList) {
              /* 追加_index_属性以替代数组下标索引*/
              let score = JSON.parse(item.questionParameter)[0].score;
              let questionGroupTestQuestionList = item.questionGroupTestQuestionList.map(
                i => {
                  arr_index = arr_index + 1;
                  return {
                    ...i,
                    /* 数组下标索引 */
                    _index_: arr_index,
                    /* 是否已经答题 */
                    is_answer: false,
                    /* 追加nodeId */
                    nodeId: item.id,
                    /* 题目分数 */
                    score
                  };
                }
              );
              /* 将各个部分的题目追加到data_trim */
              data_trim = [...data_trim, ...questionGroupTestQuestionList];
              return {
                ...item,
                questionGroupTestQuestionList
              };
            }
          });
          this.paperDetail = {
            ...this.paperDetail,
            questions: originData
          };
          /* 初始化题目 */
          this.questionList = data_trim.map(item => {
            let trim_item = this.initAnswer(item);
            return {
              ...item,
              ...trim_item,
              /* 是否显示试题解析 */
              is_show_explain: false,
              /* 是否显示正确答案 */
              is_show_answer: false,
              /* 是否允许输入 */
              is_ban_input: false
            };
          });
        }
        /* 禁止浏览器翻页退出操作 考试计时 */
        if (["2", "3"].includes(this.type) && !this.review) {
          this.removeReflesh();
          if (this.count_timer) {
            clearInterval(this.count_timer);
          }
          this.count_timer = setInterval(this.countTime, 1000);
        }
        /* 考试回顾获取考试记录 */
        // if (this.review) {
        //   this.getTestReview();
        // }
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
      }
    },
    /* 考试计时 */
    countTime() {
      this.useTime++;
    },
    /* 获取试卷详情 */
    async getQuestionBankPaperOne() {
      this.SET_IS_LOADING(true);
      let result = await getQuestionBankPaperOne(this.testId);
      console.log("获取试卷详情：", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        if (data) {
          this.paperDetail = {
            ...this.paperDetail,
            ...data,
            span: Number(data.span) * 60 * 1000
          };
          const { answerCount, testNum } = this.paperDetail;
          if (answerCount == 1) {
            if (testNum >= answerCount) {
              this.$dialog
                .alert({
                  title: "提示",
                  confirmButtonText: "确认",
                  message: `已达到考试上限次数！`
                })
                .then(() => {
                  this.$router.back();
                });
              return;
            }
          }
          if (!this.review) {
            this.getTestPaperDetail();
          }
          
        } else {
          this.$dialog
            .alert({
              title: "提示",
              confirmButtonText: "确认",
              message: `没有找到试卷，返回上页`
            })
            .then(() => {
              this.$router.back();
            });
        }
      } else {
        this.$dialog
          .alert({
            title: "提示",
            confirmButtonText: "确认",
            message: `没有找到试卷，返回上页`
          })
          .then(() => {
            this.$router.back();
          });
      }
      this.SET_IS_LOADING(false);
    },
    /* 上次做到事件 */
    async lastDoneWhere({ type }) {
      /* 直接去到目标试题 */
      if(this.targetId){
        let lastIndex = this.questionList.findIndex(item=>item.id == Number(this.targetId))
        if(lastIndex != -1){
          console.log("目标试题下标",lastIndex);
          this.num_active = lastIndex;
          return;
        }else{
          console.log("找不到目标试题下标");
        }
      }
      /* 获取上次做到 */
      if (type == "get") {
        let params = {
          chapterId: this.chapterId,
          userId: this.user_info.id
        };
        let result = await getLastDoneList(params);
        console.log("获取上次做到：", result);
        if (result && result.data && result.data.code == 200) {
          const { rows } = result.data.data;
          if (rows && rows.length > 0) {
            this.lastDone = rows[0];
            if (this.lastDone.lastIndex) {
              this.num_active = this.lastDone.lastIndex;
            }
          }
        }
        /* 修改当前章节上次做到 */
      } else if (type == "update") {
        let params = {
          chapterId: this.chapterId,
          userId: this.user_info.id,
          lastIndex: this.num_active
        };
        let result = await updateLastDone(params);
        console.log("修改上次做到：", result);
        if (result && result.data && result.data.code == 200) {
          this.lastDone = result.data.data;
        }
        /* 新增当前章节上次做到 */
      } else if (type == "save") {
        let params = {
          chapterId: this.chapterId,
          userId: this.user_info.id,
          lastIndex: this.num_active
        };
        let result = await saveLastDone(params);
        console.log("新增上次做到：", result);
        if (result && result.data && result.data.code == 200) {
          this.lastDone = result.data.data;
        }
      }
    },
    /**
     * 初始化答题
     * detail - 试题详情
     */
    initAnswer(detail) {
      const { type, answer, question } = detail;
      let user_answer = "";
      let origin_answer = [];
      let origin_answer_trim = [];
      let question_copy = "";

      try {
        question_copy = JSON.parse(question);
      } catch (err) {
        console.warn(err);
      }
      switch (type) {
        case 1:
          origin_answer_trim = Number(answer);
          user_answer = "";
          break;
        case 2:
          try {
            origin_answer = JSON.parse(answer);
          } catch (err) {
            console.warn(err);
          }
          origin_answer_trim = origin_answer;
          user_answer = [];
          break;
        case 3:
          origin_answer_trim = answer;
          user_answer = "";
          break;
        case 4:
          try {
            origin_answer = JSON.parse(answer);
          } catch (err) {
            console.warn(err);
          }
          if (["1", "2", "3"].includes(this.type) && !this.review) {
            if (question_copy && question_copy.answer) {
              user_answer = question_copy.answer.map(i => "");
            }
            break;
          }
          origin_answer_trim = origin_answer;
          user_answer = origin_answer.map(i => "");
          break;
        case 5:
          origin_answer_trim = Number(answer);
          user_answer = "";
          break;
        default:
          user_answer = "";
          break;
      }
      return {
        ...detail,
        answer: origin_answer_trim,
        question: question_copy,
        user_answer
      };
    },
    /**
     * 初始化答案
     * type - 题型
     * orginAnswer - 未格式化的答案
     */
    initAnswerItem(type, orginAnswer) {
      let user_answer = "";
      switch (type) {
        case 1:
          user_answer = Number(orginAnswer);
          break;
        case 2:
          try {
            user_answer = JSON.parse(orginAnswer);
          } catch (err) {
            console.warn(err);
          }
          break;
        case 3:
          user_answer = orginAnswer;
          break;
        case 4:
          try {
            user_answer = JSON.parse(orginAnswer);
          } catch (err) {
            console.warn(err);
          }
          break;
        case 5:
          user_answer = Number(orginAnswer);
          break;
        default:
          user_answer = orginAnswer;
          break;
      }
      return user_answer;
    },
    /* 获取章节下的题目 */
    async getQuestionsByChapter() {
      this.SET_IS_LOADING(true);


      let params = this.chapterId + "&userId=" + this.user_info.id;
      let result = await getQuestionBankChapterQuestions(params);
      console.log("获取章节下的题目：", result);
      if (result && result.data && result.data.code == 200) {
        this.chapterDetail = result.data.data;
        const { children } = result.data.data;
      }
      this.$nextTick(() => {
        this.SET_IS_LOADING(false);
      });
    },
    /* 章节练习保存 */
    async saveChapterPractice() {
      let params = {
        lastIndex: this.num_active,
        json: JSON.stringify([
          {
            userId: this.user_info.id,
            questionGroupId: this.questionId,
            chapterId: this.chapterId,
            questionId: this.current_item.id,
            userAnswer: this.current_item.user_answer,
            questionType: this.current_item.type
          }
        ])
      };
      let result = await saveChapterPractice(params);
      console.log("章节练习保存:", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        
        if (data) {
          delete data.id
          this.questionList = this.questionList.map((item, index) => {
            if (item.id == this.current_item.id) {
              let new_item = {
                ...item,
                ...data,
                type: item.type,
                is_show_answer: true,
                is_show_explain: true,
                is_answer: true,
                is_ban_input: true
              };
              console.log("new_item:", new_item);
              return new_item;
            } else {
              return item;
            }
          });
        }
      }
    },
    /* 章节练习继续做题 */
    async chapterContinueTest() {
      let params = {
        chapterId: this.chapterId,
        userId: this.user_info.id
      };
      let result = await chapterContinueTest(params);

      
      console.log("章节练习继续做题：", result);
      if (result && result.data && result.data.code == 200) {
        let children = result.data.data;
        if (children) {
          this.questionList = children.map(item => {
            // console.log("item",item);
            let trim_item = this.initAnswer(item);
            // console.log("trim_item",trim_item);
            let trim_user_answer = "";
            let new_item = {
              ...item,
              ...trim_item,
              /* 是否显示试题解析 */
              is_show_explain: false,
              /* 是否显示正确答案 */
              is_show_answer: false,
              /* 是否允许输入 */
              is_ban_input: false,
              /* 是否已经答题 */
              is_answer: false
            };
            // console.log("new_item",new_item);
            if (item.userAnswer) {
              trim_user_answer = this.initAnswerItem(
                item.type,
                item.userAnswer
              );
              new_item = {
                ...new_item,
                user_answer: trim_user_answer,
                is_show_answer: true,
                is_show_explain: true,
                is_answer: true,
                is_ban_input: true
              };
            }
            return new_item;
          });
          this.lastDoneWhere({ type: "get" });
        }
      }
    },
    /* 章节练习确认 */
    handleCheck() {
      if (this.current_item.is_ban_input) {
        return false;
      }
      this.questionList = this.questionList.map((item, index) => {
        if (item.id == this.current_item.id) {
          return {
            ...item,
            is_show_answer: true,
            is_show_explain: true,
            is_answer: true,
            is_ban_input: true
          };
        } else {
          return item;
        }
      });
      this.saveChapterPractice();
    },
    /* 错题随练 */
    async getRandomWrongQuestion() {
      this.SET_IS_LOADING(true);
      let params = {
        questionGroupId: this.questionId,
        userId: this.user_info.id
      };
      let result = await getRandomWrongQuestion(params);
      console.log("获取错题随练：", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        if (data && data.length > 0) {
          this.questionList = data.map(item => {
            let trim_item = this.initAnswer({
              ...item,
              type: item.questionType
            });
            return {
              ...item,
              ...trim_item,
              /* 是否显示试题解析 */
              is_show_explain: false,
              /* 是否显示正确答案 */
              is_show_answer: false,
              /* 是否允许输入 */
              is_ban_input: false,
              /* 是否已经答题 */
              is_answer: false
            };
          });
        }
      }
      this.SET_IS_LOADING(false);
    },
    /* 错题回顾 */
    async getQuestionBankWrong() {
      this.SET_IS_LOADING(true);
      let params = {
        userId: this.user_info.id,
        questionGroupId: this.questionId
      };
      let result = await getQuestionBankWrong(params);
      console.log("获取错题回顾：", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        if (data) {
          this.questionList = data.map((item, index) => {
            let trim_item = this.initAnswer({
              ...item,
              type: item.questionType
            });
            let trim_user_answer = this.initAnswerItem(
              item.type,
              item.userAnswer
            );
            let new_item = {
              ...item,
              ...trim_item,
              user_answer: trim_user_answer,
              is_show_answer: true,
              is_show_explain: true,
              is_answer: true,
              is_ban_input: true
            };
            return new_item;
          });
        }
      }
      this.SET_IS_LOADING(false);
    },
    /* 获取当前题库 */
    async getQuestionBankOne() {
      this.SET_IS_LOADING(true);
      let result = await getQuestionBankOne(this.questionId);
      console.log("获取当前题库：", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        if (data) {
          this.questionBank = data;
        }
      }
      this.SET_IS_LOADING(false);
    },
    /* 答题change事件 */
    handleQuestionChange(v) {
      let __TYPE__ = Object.prototype.toString.call(v);
      if (__TYPE__ === "[object Array]") {
        let null_result_length = v.filter(i => !String(i)).length;
        console.log("null_result_length:", null_result_length);
        if (null_result_length == v.length) {
          return false;
        }
      } else if (!String(v)) {
        return false;
      }
      /* 将questionList中的当前题目标识为已作答 */
      this.questionList = this.questionList.map((item, index) => {
        if (index == this.num_active) {
          return {
            ...item,
            is_answer: true
          };
        } else {
          return item;
        }
      });
      /* 考试 */
      if (["1", "2", "3"].includes(this.type)) {
        /* 将paperDetail->questions->questionGroupTestQuestionList中当前题目标识为已作答 */
        this.paperDetail = {
          ...this.paperDetail,
          questions: this.paperDetail.questions.map((item, index) => {
            if (item.questionGroupTestQuestionList) {
              let questionGroupTestQuestionList = item.questionGroupTestQuestionList.map(
                (item1, index1) => {
                  if (item1._index_ == this.num_active + 1) {
                    return {
                      ...item1,
                      is_answer: true
                    };
                  } else {
                    return item1;
                  }
                }
              );
              return {
                ...item,
                questionGroupTestQuestionList
              };
            } else {
              return item;
            }
          })
        };
      }
    },
    /* 获取考试记录详情 */
    async getTestReview() {
      this.SET_IS_LOADING(true);
      let params = {
        id: this.testRecordId
      };
      let result = await getTestReview(params);
      console.log("获取考试记录详情:", result);
      if (result && result.data && result.data.data) {
        const { data } = result.data;
        this.testRecord = data;
        this.testRecord.items.forEach((item, index) => {
          let trim_item = this.initAnswer(item.questionGroupTestQuestion);
          this.questionList = [...this.questionList,{
            ...item,
            ...trim_item,
            recordQuestionId: item.id,
            user_answer: this.initAnswerItem(
              item.questionType,
              item.chosenAnswer
            ),
            // score: item1.score,
            user_score: item.score,
            is_show_answer: true,
            is_show_explain: true,
            is_answer: true,
            is_ban_input: true,
            is_review: true
          }]
          // this.questionList = this.questionList.map((item1, index2) => {
          //   if (item.mqId == item1.id) {
          //     return {
          //       ...item1,
          //       ...item,
          //       ...trim_item,
          //       recordQuestionId: item.id,
          //       user_answer: this.initAnswerItem(
          //         item.questionType,
          //         item.chosenAnswer
          //       ),
          //       score: item1.score,
          //       user_score: item.score,
          //       is_show_answer: true,
          //       is_show_explain: true,
          //       is_answer: true,
          //       is_ban_input: true,
          //       is_review: true
          //     };
          //   } else {
          //     return item1;
          //   }
          // });
        });
      }
      this.SET_IS_LOADING(false);
    },
    /* 初始化页面 */
    initPage() {
      /* 考试 */
      if (["1", "2", "3"].includes(this.type)) {
        this.getQuestionBankPaperOne();
        /* 考试回顾获取考试记录 */
        if (this.review) {
          this.getTestReview();
        }
        /*练习 */
      } else if (["0"].includes(this.type)) {
        this.getQuestionsByChapter();
        this.chapterContinueTest();
        /* 错题随练 错题回顾*/
      } else if (["4"].includes(this.type)) {
        this.getQuestionBankOne();
        /* 错题回顾*/
        if (this.review) {
          this.getQuestionBankWrong();
          /* 错题随练*/
        } else {
          this.getRandomWrongQuestion();
        }
      }
    },
    /* 阻止F5刷新 */
    keydown(e) {
      var evt = window.event || e;
      var code = evt.keyCode || evt.which;
      console.log("code:", code);
      //组合事件
      if (
        code == 116 ||
        (evt.ctrlKey == true && code == 82) ||
        (evt.ctrlKey == true && code == 116) ||
        code == 114
      ) {
        if (evt.preventDefault) {
          evt.preventDefault();
        } else {
          evt.keyCode = 0;
          evt.returnValue = false;
          evt.cancelBubble = true;
          return false;
        }
      }

      //屏蔽Alt+F4
      if (evt.altKey && code == 115) {
        window.showModelessDialog(
          "about:blank",
          "",
          "dialogWidth:1px;dialogheight:1px"
        );
        evt.keyCode = 0;
        evt.returnValue = false;
        evt.cancelBubble = true;
        return false;
      }

      //屏蔽 Alt+ 方向键 ← ;屏蔽 Alt+ 方向键 → ！验证
      if (evt.altKey && (code == 37 || code == 39)) {
        console.log("网页路由");
        evt.keyCode = 0;
        evt.returnValue = false;
        evt.cancelBubble = true;
        return false;
      }
    },
    /* 阻止刷新 */
    reflesh(e) {
      var evt = window.event || e;
      let message = undefined;
      evt.returnValue = message;
      return message;
    },
    context(e) {
      return false;
    },
    /* 阻止页面前进后退 */
    popstate(e) {
      history.replaceState(null, null, document.URL);
    },
    /* 清除刷新事件 */
    removeReflesh() {
      console.log("清除刷新事件！");
      if (process.client) {
        document.addEventListener("keydown", this.keydown, false);
        document.addEventListener("contextmenu", this.context, false);
        window.addEventListener("beforeunload", this.reflesh, false);
        history.pushState(null, null, document.URL);
        window.addEventListener("popstate", this.popstate, false);
      }
    },
    /* 恢复刷新事件 */
    destroyRemotion() {
      console.log("恢复事件！");
      if (process.client) {
        document.removeEventListener("keydown", this.keydown);
        document.removeEventListener("contextmenu", this.context);
        window.removeEventListener("beforeunload", this.reflesh);
        window.removeEventListener("popstate", this.popstate);
      }
    },
    /* 导航条点击事件 */
    handleClickLeft() {
      this.is_half_out = true;
    }
  },
  created() {
    this.initPage();
  },
  mounted() {},
  activated() {
    /* 重置state */
    Object.assign(this.$data, originState);
    this.initPage();
  },
  deactivated() {
    if (["2", "3"].includes(this.type)) {
      this.destroyRemotion();
    }
  },
  destroyed() {
    if (["2", "3"].includes(this.type)) {
      this.destroyRemotion();
    }
  }
};
</script>
<style lang="scss" scoped>
@keyframes fadeInLeft {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-100%);
  }
  51% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100%);
  }
  51% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.van-count-down {
  color: var(--theme-color);
  line-height: 0.4224rem;
  font-size: 0.34559rem;
  font-size: 0.36rem;
}
.colon {
  display: inline-block;
  // margin: 0 4px;
  color: var(--theme-color);
  font-size: 0.34559rem;
  font-size: 0.36rem;
  line-height: 0.4224rem;
}
.block {
  display: inline-block;
  // width: .5rem;
  color: var(--theme-color);
  font-size: 0.34559rem;
  font-size: 0.36rem;
  text-align: right;
  text-align: center;
  background-color: #fff;
  line-height: 0.4224rem;
}
.answer-sheet {
  background-color: #f7f7fa;
  min-height: 100vh;
  width: 7.2rem;
  padding-bottom: 1rem;
  // 倒计时
  .count-down {
    width: 6.624rem;
    height: 0.96rem;
    background-color: #ffffff;
    border-radius: 0.096rem;
    margin: 0.288rem auto 0;
    display: flex;
    align-items: center;
    padding: 0 0.288rem;
    img {
      width: 0.4224rem;
      height: 0.4224rem;
      display: block;
      background: var(--theme-color);
      margin-top: -0.05rem;
    }
    .time-label {
      color: var(--theme-color);
      font-size: 0.34559rem;
      margin-left: 0.34559rem;
      margin-right: 0.2rem;
      line-height: 0.4224rem;
    }
  }
  // 题目解析
  .analysis-container {
    width: 6.624rem;
    background-color: #ffffff;
    border-radius: 0.096rem;
    margin: 0.3648rem auto 0;
    overflow: hidden;
    .analysis-head-info {
      width: 100%;
      height: 1.92rem;
      border-bottom: 0.0096rem solid #e3e4e6;
      background: #ffffff;
      display: flex;
      justify-content: center;
      .head-left {
        width: 50%;
        height: 100%;
        .error-number {
          width: 0.576rem;
          height: 0.576rem;
          line-height: 0.576rem;
          text-align: center;
          color: #ffffff;
          font-size: 0.288rem;
          background-color: #f39090;
          border-radius: 50%;
          margin: 0.4224rem auto 0.2rem;
        }
        .error-text {
          text-align: center;
          font-size: 0.2688rem;
          color: #4a4b4d;
          font-weight: bold;
        }
      }
      .head-right {
        width: 50%;
        height: 100%;
        .difficulty-number {
          width: 100%;
          height: 0.576rem;
          margin: 0.4224rem auto 0.2rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .difficulty-text {
          text-align: center;
          font-size: 0.2688rem;
          color: #4a4b4d;
          font-weight: bold;
        }
      }
    }
    .analysis-content-info {
      .analysis-video {
        .video-name {
          padding: 0.288rem;
          font-size: 0.288rem;
          font-weight: bold;
          color: #4a4b4d;
        }
      }
      .analysis-question {
        .analysis-text {
          padding: 0.288rem;
          font-size: 0.288rem;
          font-weight: bold;
          color: #4a4b4d;
          line-height: 0.44rem;
          margin-bottom: 0.3rem;
        }
      }
    }
  }
  // 错题回顾按钮/正常考试按钮
  .btn-list {
    .btn {
      margin: auto;
      width: 6.624rem;
      height: 0.8448rem;
      font-size: 0.288rem;
      line-height: 0.8448rem;
      text-align: center;
      background-color: var(--theme-color);
      color: #ffffff;
      border-radius: 0.4224rem;
      border: none;
      outline: none;
    }
    .btn-row {
      display: flex;
      justify-content: space-around;
      margin: 0.4rem auto;
      .btn {
        width: 3.072rem;
      }
    }
  }
  // 底部导航
  .question-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 7.2rem;
    height: 0.9408rem;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 0.4rem;
    justify-content: space-between;
    color: var(--theme-color);
    font-size: 0.288rem;
    // img{
    //     display: block;
    //     width: .3264rem;
    //     height: .3264rem;
    //     background-color: var(--theme-color);
    // }
    .collection {
      width: 0.3264rem;
      height: 0.3264rem;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  // 答题卡弹窗
  .answer-sheet-box {
    height: calc(80vh - 44px);
    overflow: auto;
    width: 7.2rem;
    .box-title {
      padding: 0.288rem;
      font-size: 0.2688rem;
      font-weight: bold;
      color: #4a4b4d;
      background-color: #f7f8fa;
    }
    .question-number {
      display: flex;
      flex-wrap: wrap;
      padding: 0.288rem 0.576rem 0.288rem;
      width: 100%;
      background: #ffffff;
      
      .number-box {
        margin: 0.095rem 0.095rem;
        width: 0.672rem;
        height: 0.672rem;
        background-color: #ebf2ff;
        border-radius: 0.0768rem;
        text-align: center;
        line-height: 0.672rem;
        font-size: 0.3455rem;
        color: var(--theme-color);
        &.active {
          background: var(--theme-color);
          color: #ffffff;
        }


        // 修改已做题颜色<--
        &.wrong {
          background-color: #f39090;
          color: #fff;
        }
        // 修改已做题颜色-->


        // &.wrong {
        //   background-color: #fceded;
        //   color: #f39090;
        // }
      }
      .done{
        color: #fff;
        // background-color: #07c160;
        background-color: #5fd598;
      }
      // .active.wrong {
      //   background-color: #f39090;
      //   color: #fff;
      // }
    }
    // .row-number {
    //   display: flex;
    //   justify-content: space-between;
    //   margin-bottom: 0.288rem;
    //   &:last-child {
    //     margin-bottom: 0rem;
    //   }
    // }
  }
  // 考试时间到
  .test-time-end {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2001;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    .test-close-box {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 5.76rem;
      height: 3.36rem;
      background-color: #ffffff;
      border-radius: 0.1344rem;
      .clock-icon {
        width: 1.2864rem;
        height: 1.2864rem;
        margin: 0.5rem auto 0;
        // margin: .576rem auto 0;
        background: var(--theme-color);
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .t-c-b-t {
        font-size: 0.3455rem;
        text-align: center;
        color: var(--theme-color);
        margin: 0.2rem 0;
      }
      .t-c-b-l {
        text-align: center;
        font-size: 0.2688rem;
        color: #adafb3;
      }
    }
  }
  // 中途退出
  .drop-out {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2001;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    .drop-out-box {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 6.048rem;
      height: 4.416rem;
      background-color: #ffffff;
      border-radius: 0.1344rem;
      .out-icon {
        width: 1.1232rem;
        height: 1.1232rem;
        margin: 0.5rem auto 0.3rem;
        background: var(--theme-color);
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .drop-out-tips {
        font-size: 0.288rem;
        color: #494b4d;
        line-height: 0.4608rem;
        text-align: center;
        font-weight: bold;
      }
      .drop-out-list {
        width: 4.8rem;
        margin: 0.4rem auto 0;
        display: flex;
        justify-content: space-between;
        .list-item {
          width: 1.536rem;
          height: 0.672rem;
          line-height: 0.672rem;
          border-radius: 0.336rem;
          text-align: center;
          font-size: 0.288rem;
          &.btn-left {
            background-color: #edf0f5;
            color: #adafb3;
          }
          &.btn-right {
            background-color: #5b96ff;
            color: #fff;
          }
        }
      }
    }
  }
  // 提前交卷
  .advance-submit {
    .head-tips {
      padding: 0 0.288rem 0.288rem;
      text-align: center;
      font-size: 0.3264rem;
      line-height: 0.48rem;
      color: #494b4d;
      .not-question-count {
        font-size: 0.34rem;
        margin: 0 0.1rem;
        color: var(--theme-color);
      }
    }
    .question-container {
      width: 100%;
      height: 5rem;
      overflow: auto;
      .answer-sheet-box {
        width: 7.2rem;
        height: 5rem;
        .box-title {
          padding: 0.288rem;
          font-size: 0.2688rem;
          font-weight: bold;
          color: #4a4b4d;
          background-color: #f7f8fa;
        }
        .question-number {
          padding: 0.288rem 0.576rem;
          background: #ffffff;
        }
        .row-number {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0.288rem;
          &:last-child {
            margin-bottom: 0rem;
          }
          .number-box {
            width: 0.672rem;
            height: 0.672rem;
            background-color: #ebf2ff;
            border-radius: 0.0768rem;
            text-align: center;
            line-height: 0.672rem;
            font-size: 0.3455rem;
            color: var(--theme-color);
            &.active {
              background: var(--theme-color);
              color: #ffffff;
            }
            &.wrong {
              background-color: #fceded;
              color: #f39090;
            }
          }
          .active.wrong {
            background-color: #f39090;
            color: #fff;
          }
        }
      }
    }
    .advance-footer {
      width: 7.2rem;
      height: 1.92rem;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0.0384rem 0.48rem 0 rgba(60, 64, 72, 0.3);
      .advance-submit-btn {
        width: 6.624rem;
        height: 0.8448rem;
        background-color: var(--theme-color);
        border-radius: 0.4224rem;
        color: #ffffff;
        text-align: center;
        line-height: 0.8448rem;
        font-size: 0.288rem;
      }
    }
  }
}
.fadeInLeft {
  transform-style: preserve-3d;
  transform-origin: left;
  animation: fadeInLeft 0.5s ease-in;
}
.fadeInRight {
  transform-style: preserve-3d;
  transform-origin: right;
  animation: fadeInRight 0.5s ease-in;
}
</style>
<style lang="scss">
.answer-sheet {
  .answer-card {
    .van-action-sheet__content {
      height: calc(80vh - 44px);
      overflow: auto;
    }
  }
}
</style>
